﻿<%@ Page Language="C#" MasterPageFile="~/default.master" AutoEventWireup="true" CodeBehind="FlexiGrid.aspx.cs"
    Inherits="Chinook.Web.DataGrid.FlexiGrid" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPlaceholder" runat="Server">    
    <%//In-page search form %>
    <div id="wosSearchBox" class="searchBox vm-frm-reg">
        <div class="div-header">
            <span>Search Employee</span>
        </div>
        <div class="searchForm" id="searchForm">
            <table>
                <tr>
                    <td class="vm-right-align">
                        <label for="">
                            Name</label>
                    </td>
                    <td>
                        <input type="text" class="text txtName req required" title="First name" id="txtName"
                            name="txtName" value="" tabindex="2" />
                       
                    </td>                   
                    </tr>
                    <tr>
                        <td class="vm-right-align">
                            <label for="">
                            Date Of Birth</label>
                    </td>
                    <td>
                        <input id="txtDob" name="txtDob" type="text" class="date" />
                        &nbsp;
                        <input type="submit" class="button small red" value="Find" id="btnFind">               
                    </td>                
                </tr>        
                <tr>
                    <td colspan="2">
                        &nbsp;
                    </td>
                </tr> 
            </table>
        </div>
    </div>
    <p>&nbsp;</p>
    <%//Flexigrid placeholder %>
    <table class="flexiGrid" style="display: none">
    </table>
    <%//Registration Form %>
    <div id="dvRegistrationForm" class="vm-frm-reg">
        <table>
            <tr>
                <td id="phGtBasic" colspan="2">
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtTitle">
                        <%=Resources.Chinook.Form.Labels.lblTitle%></label>
                </td>
                <td>
                    <input title="Tool tip content" class="text txtSalute" id="txtTitle" type="text"
                        tabindex="1" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtFirstName">
                        <%=Resources.Chinook.Form.Labels.lblFirstName%></label>
                </td>
                <td>
                    <input type="text" class="text txtName req required" title="First name" id="txtFirstName"
                        name="txtFirstName" value="" tabindex="2" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtLastName">
                        <%=Resources.Chinook.Form.Labels.lblLastName%></label>
                </td>
                <td>
                    <input type="text" class="text txtName" title="Last Name" id="txtLastName" tabindex="3" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtDateOfBirth">
                        <%=Resources.Chinook.Form.Labels.lblDateOfBirth%></label>
                </td>
                <td class="">
                    <input type="text" class="text date req tooltip required" title="Enter your date of birth as dd/mm/yyyy format"
                        id="txtDateOfBirth" name="txtDateOfBirth" tabindex="4" />
                </td>
            </tr>
            <tr>
                <td id="pgGtAddress" colspan="2">
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtAddressLine1">
                        <%=Resources.Chinook.Form.Labels.lblAddressLine1%></label>
                </td>
                <td>
                    <input type="text" class="text txtAddress req required" title="" id="txtAddressLine1"
                        name="txtAddressLine1" tabindex="5" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtAddressLine2">
                        <%=Resources.Chinook.Form.Labels.lblAddressLine2%></label>
                </td>
                <td>
                    <input type="text" class="text txtAddress" title="" id="txtAddressLine2" tabindex="6" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtCity">
                        <%=Resources.Chinook.Form.Labels.lblCity%></label>
                </td>
                <td>
                    <input type="text" class="text txtCity req required" title="" id="txtCity" name="txtCity"
                        tabindex="7" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtState">
                        <%=Resources.Chinook.Form.Labels.lblState%></label>
                </td>
                <td>
                    <input type="text" class="text txtSalute req tooltip required" title="Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag's title attribute."
                        id="txtState" name="txtState" tabindex="8" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtPostalCode">
                        <%=Resources.Chinook.Form.Labels.lblPostalCode%></label>
                </td>
                
                <td>
                   <table>
                   <tr>
                   <td>
                       <input type="text" class="text txtPostalCode" title="Lorum ipsum lorum ipsum, lorum ipsum"
                           id="txtPostalCode" name="txtPostalCode" tabindex="9" />
                   </td>
                       <td class="vm-right-align" style="padding-left:10px;">
                           <label for="cboCountry">
                               <%=Resources.Chinook.Form.Labels.lblCountry%></label>
                       </td>
                       <td>
                           <select name="cboCountry" id="cboCountry" class="req required">
                               <option value>-Select-</option>
                               <option value="India">India</option>
                           </select>
                       </td>
                   </tr>
                   </table>
                </td>
            </tr>       
            <tr>
                <td class="vm-right-align">
                    <label for="txtEmail">Email</label>
                </td>
                <td>
                    <input type="text" class="text txtEmail req required" title="Email" id="txtEmail"
                        name="txtEmail" value="" />
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtPhone">
                        Phone</label>
                </td>
                <td>
                    <table>
                        <tr>
                         
                            <td>
                                <input type="text" class="text phone-fax req required" title="Phone" id="txtPhone"
                                    name="txtPhone" value="" />
                            </td>
                            <td class="vm-right-align" style="padding-left:10px;">
                                <label for="txtFax">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fax</label>
                            </td>
                            <td>
                                <input type="text" class="text phone-fax  req required" title="Fax" id="txtFax" name="txtFax"
                                    value="" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td id="pgGtReportsTo" colspan="2">
                </td>
            </tr>
            <tr>
                <td class="vm-right-align">
                    <label for="txtReportsTo">
                        Manager</label>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <span id="spnManager" class="vm-frm-lookup-result"></span>
                                <input type="text" id="txtReportsTo" name="txtReportsTo" value="" style="visibility:hidden;width:10px;"/>
                            </td>
                            <td style="padding-left:1px;">
                                <span id="lnkLookUpManager" class="vm-ico-button vm-ico-button-lookup"></span>
                            </td>
                            <td class="vm-right-align">
                                <label for="txtHireDate">
                                    Hire Date</label>
                            </td>
                            <td class="">
                                <input type="text" class="text date req required" title="Enter hire date as dd/mm/yyyy format"
                                    id="txtHireDate" name="txtHireDate" tabindex="" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>          
        </table>
        <div class="vm-align-right">
            <input type="submit" id="btnRegister" value="Register" class="button small blue"
                tabindex="12" />
            &nbsp;
            <input type="reset" id="btnClear" value="Clear" class="button small black" tabindex="13" />
        </div>
    </div>
    <%//Lookup %>
    <div id="lookUpEmployee">
        <table class="searchForm">
            <tr>
                <td>
                    <table>
                        <tr>
                            <td class="vm-right-align">
                                <label for="">
                                    First Name</label>
                            </td>
                            <td>
                                <input type="text" class="text txtName req required" title="First name" id="txtEmployeeNameLike"
                                    name="txtEmployeeNameLike"/>
                            </td>
                            <td>
                                <input type="submit" class="button small blue" value="Find" id="btnLkUpEmployee" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <%//Flexigrid placeholder %>
                    <table class="flexiGridLookUpEmployee">
                    </table>
                </td>
            </tr>
        </table>
    </div>    
    <%        
        /*
         http://flexigrid.info/
         http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx
         http://www.kenthouse.com/blog/2009/07/fun-with-flexigrids/        
         http://www.flexigrid-asp.net/demo/default.aspx
        */
         %>
    <script type="text/javascript" language="javascript">
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function test() {

        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function BuildEmployeeGrid() {
            $(".flexiGrid").flexigrid({
                dataType: 'json',
                colModel: [
        { display: '', name: '', width: 15, align: 'center', process: FormatSelect },
        { display: '', name: '', width: 15, align: 'center', process: AttachEdit},
         { display: '', name: '', width: 15, align: 'center', process: AttachDelete},
		{ display: 'Name', name: 'Fullname', width: 150, sortable: true, align: 'center', process: function(celDiv, id) {$(celDiv).css("text-align","left");} },
		{ display: 'Email', name: 'Email', width: 150, sortable: true, align: 'center', process: AttachTipsy },
		{ display: 'Address', name: 'Address', width: 150, align: 'center', process: AttachTipsy },
		{ display: 'Date Of Birth', name: 'BirthDate', width: 80, sortable: true, align: 'center', process: procMe },
		{ display: 'Manager', name: 'ManagerFullName', width: 150, align: 'center', process: AttachTipsy }
		
		],
		buttons: [
		{ name: 'Add', bclass: 'add', onpress: ExecuteCommand }	,	
		{ separator: true }
		],     
                searchitems: [
		{ display: 'Name', name: 'Fullname' },
		
		{ display: 'Email', name: 'Email', isdefault: true }
		
		],
		        sortname: "Fullname",
                sortorder: "asc",
                usepager: true,
                title: false, //'Employee'
                useRp: true,
                rp: 2,
                showTableToggleBtn: true,
                width: 800, //'auto'
                height: 'auto'
                , onSuccess: flexi_colorGridRows //change row colours here 
                ,onSubmit: addFormData
            }); 
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function flexi_colorGridRows() {
            $(".flexiGrid tr").each(function() {
                var email = $(this).find("td:nth(4)").text()
                if (email == 'steve@chinookcorp.com') { $(this).addClass("lightgreen") }
            });
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
         function ExecuteCommand(cmd, grid) {
             //$("#dvRegistrationForm").removeClass("ui-helper-hidden");
             $("#dvRegistrationForm").dialog("open")
         }
         //-------------------------------------------------------------------------------------------------
         //
         //-------------------------------------------------------------------------------------------------
        function AttachTipsy(celDiv, id) { $(celDiv).addClass("vm-beh-pointer").css("text-align","left").tipsy({ gravity: 'nw', title: function() { return $(celDiv).html() }, html: true }); }
        function FormatSelect(celDiv, id) {$(celDiv).addClass("icoBul-green");}
        function AttachEdit(celDiv, id) { $(celDiv).addClass("icoEd"); }
        function AttachDelete(celDiv, id) { $(celDiv).addClass("icoDelete"); }
        function procMe(celDiv, id) {      
            var date = new Date(parseInt($(celDiv).html().substr(6)));          
            $(celDiv).html($.datepicker.formatDate('dd-M-yy', date));
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function formatEmployeeResults(res) {    
                 
            var rows = Array();
            for (i = 0; i < res.d.EmployeeViewModel.length; i++) {                
                var item = res.d.EmployeeViewModel[i];
                rows.push({id:item.Id, cell: ['', '', '', item.Fullname, item.Email, item.Address, item.BirthDate, item.ManagerFullName, item.ManagerId] });               
            }
            return {
            total: res.d.TotalCount,
            page: res.d.PageIndex,
                rows: rows
            };
        }
        function addFormData() {        
            SearchEmployee(this);
           //call pagenation
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function SearchEmployee(cfg) {
           var request = {};         
            request.Name = $("#txtName").val();
            request.BirthDateFrom = $("#txtDob").val();
            request.PageIndex = 1;
            request.PageSize = 2;
            if (cfg.page != undefined) {             
                request.PageIndex = cfg.newp;
                request.PageSize = cfg.rp;
            }
          
            //,employeeSearchRequest.PageSize
            var params = JSON.stringify({ 'employeeSearchRequest': request });
        	try {
        		//debugger;
        		 $.ajax({
                type: "POST",
                url: "http://www.senthilsweb.com/EmployeeWebService.asmx/SearchEmployee",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnEmployeeSearchSuccess,
                error: OnEmployeeSearchError
            });
        		
//        		$.ajax({ url: "http://10.10.5.30/Chinook.Web/EmployeeWebService.asmx/SearchEmployee",
//    data: params,
//        dataType: "jsonp",
//        				type: "POST",
//        success: OnEmployeeSearchSuccess,
//        error: function(jqXHR, textStatus, errorThrown) {
//            alert(errorThrown);
//        }
//    });
//        		
        		
        		
        	} catch(e) {
        		debugger;
        	} 
           
            return false;
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function OnEmployeeSearchSuccess(res) {  
             
            $(".flexiGrid").flexigrid().flexAddData(formatEmployeeResults(res))
            $(".flexiGrid").flexigrid().flexReload();
            return false;
        }        
        function OnEmployeeSearchError(res) {
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function EmployeeLookup() {
            var request = {};
            request.Name = $("#txtEmployeeNameLike").val();
            var params = JSON.stringify({ 'employeeSearchRequest': request });           
            $.ajax({
                type: "POST",
                url: _absWebRoot + "EmployeeWebService.asmx/SearchEmployee",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnEmployeeLookUpSuccess,
                error: OnEmployeeSearchError
            });
            return false;
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function OnEmployeeLookUpSuccess(res) {         
            $(".flexiGridLookUpEmployee").flexigrid().flexAddData(formatEmployeeLookUpResults(res))
            $(".flexiGridLookUpEmployee").flexigrid().flexReload();
            return false;
        }

        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function formatEmployeeLookUpResults(res) {
            var rows = Array();
            for (i = 0; i < res.d.TotalCount; i++) {
                var item = res.d.EmployeeViewModel[i];
                rows.push({ cell: ['', item.Fullname, item.Email, item.BirthDate, item.Id] });
            }
            return {
            total: res.d.TotalCount,
                page: 1,
                rows: rows
            };
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        var _isLookUpGridInitzed = false;
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function InitLookUpEmployeeGrid() {
            $(".flexiGridLookUpEmployee").flexigrid({
                dataType: 'json',
                colModel: [
                //hide: true
                { display: '', name: '', width: 15, align: 'center', process: OnManagerClick },       
                { display: 'Name', name: 'Fullname', width: 150, sortable: true, align: 'center', process: function(celDiv, id) { $(celDiv).css("text-align", "left"); } },
                { display: 'Email', name: 'Email', width: 150, sortable: true, align: 'center', process: AttachTipsy },
                { display: 'Date Of Birth', name: 'BirthDate', width: 65, sortable: true, align: 'center', process: procMe },
                { display: 'Id', name: 'Id', hide: true }, 
                ],   
                    usepager: false,
                    title: false, //'Employee'
                    useRp: false,                  
                    showTableToggleBtn: false,
                    width: 435,
                    height: 300
                });
                _isLookUpGridInitzed = true;
            }
            //-------------------------------------------------------------------------------------------------
            //
            //-------------------------------------------------------------------------------------------------
            function OnManagerClick(celDiv, id) {
                $(celDiv).addClass("icoBul-green");
                $(celDiv).click(function() {
                    //Name
                    $("#spnManager").text($(celDiv).parent().next().text())
                    //Id                  
                    $("#txtReportsTo").val($(celDiv).parent().siblings(':nth(3)').text())                   
                    //Finally close dialog
                    $("#lookUpEmployee").dialog("close");
                })
           }
           
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function SaveEmployee() {
            var request = {};
            request.employeeViewModel = {};
            //Personal Information
            request.employeeViewModel.Title = $("#txtTitle").val();
            request.employeeViewModel.FirstName = $("#txtFirstName").val();
            request.employeeViewModel.LastName = $("#txtLastName").val();
            request.employeeViewModel.BirthDate = $("#txtDateOfBirth").val();
            //Contact Information
            request.employeeViewModel.StreetAddressLine1 = $("#txtAddressLine1").val();
            request.employeeViewModel.StreetAddressLine2 = $("#txtAddressLine2").val();
            request.employeeViewModel.City = $("#txtCity").val();
            request.employeeViewModel.State = $("#txtState").val();
            request.employeeViewModel.Country = $("#cboCountry").val();
            request.employeeViewModel.PostalCode = $("#txtPostalCode").val();
            request.employeeViewModel.Email = $("#txtEmail").val();
            request.employeeViewModel.Phone = $("#txtPhone").val();
            request.employeeViewModel.Fax = $("#txtFax").val();
            //Job Information
            request.employeeViewModel.ManagerId = $("#txtReportsTo").val();
            request.employeeViewModel.HireDate = $("#txtHireDate").val();          
            var params = JSON.stringify({ 'employeeSaveRequest': request });
           
            $.ajax({
                type: "POST",
                url: _absWebRoot + "EmployeeWebService.asmx/SaveEmployee",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSaveEmployeeSuccess,
                error: OnSaveEmployeeFailure
            });
            return false;
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function OnSaveEmployeeSuccess(res) { alert(res.d.Success) }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function OnSaveEmployeeFailure(res) { alert(res.d.Message) }
        //-------------------------------------------------------------------------------------------------
        //Page Load Complete (After Dom Ready)
        //-------------------------------------------------------------------------------------------------
        $(function() {
            setTimeout("BuildEmployeeGrid()", 0);
            $("#wosSearchBox").attachSliderButton();
            $(function() { $("#phGtBasic").grouptitle({ classname: "vm-frm-title-gray", title: "Personal Information" }); });
            $(function() { $("#pgGtAddress").grouptitle({ classname: "vm-frm-title-gray", title: "Contact Information" }); });
            //$(function() { $("#pgGtContact").grouptitle({ classname: "vm-frm-title-gray", title: "Communication Information" }); });
            $(function() { $("#pgGtReportsTo").grouptitle({ classname: "vm-frm-title-gray", title: "Job Information" }); });
            //Popup panels
            $("#dvRegistrationForm").dialog({ autoOpen: false, modal: true, width: 600, title: 'Add Employee' });
            $("#lookUpEmployee").dialog({  position: 'top' , autoOpen: false, modal: true, width: 500, title: 'Lookup Employee' });
            //Click Events
            $("#btnFind").click(SearchEmployee);
            $("#lnkLookUpManager").click(function() { setTimeout("InitLookUpEmployeeGrid()", 0); $("#lookUpEmployee").dialog("open"); });
            $("#btnRegister").click(SaveEmployee);
            $("#btnLkUpEmployee").click(EmployeeLookup);
        });
    </script>

</asp:Content>

